<template>
	<view class="container">
		<!-- F1 轮播图 开始 -->
		<view class="swiper-box">
			<u-swiper :list="banner" indicatorMode="line" circular imgMode="aspectFill" :height='383'>
			</u-swiper>
		</view>
		<!-- F1 轮播图 结束 -->

		<!-- F2 选项卡 开始 -->
		<view style="margin-bottom: 16rpx;">
			<v-tabs v-model="activeTab" :scroll="true" :tabs="category" field="tagName" lineHeight="4rpx" activeColor="#3B3D46"
			 color="#999CA3" lineColor="#3E9CF9" bgColor="#f8f8f8" @change="changetab" />
		</view>
		<!-- F2 选项卡 结束 -->

		<!-- F3 新闻列表 开始 -->
		<view v-for="(categoryItem,categoryIndex) in category" :key="categoryItem.tagUuid" v-show="activeTab==categoryIndex">
			<!-- 选项卡1内容 开始 -->
			<newsCard v-for="(item,i) in list" :key='i' :url='item.coverImageUrl' :content='item.content' :subHead='item.publishTime' @click='_click(item)' />
			<!-- 选项卡1内容 结束 -->
		</view>
		<!-- F3 新闻列表 开始 -->	
	</view>
</template>

<script>
	import newsCard from '@/components/newsCard.vue'
	export default {
		components: {
			newsCard
		},
		data() {
			return {
				areaCode: this.$api.util.getAreaCode(),
				// 轮播图
				banner: [
					require('@/static/image/armyHonor/armyBanner.png'),
					require('@/static/image/armyHonor/armyBanner.png'),
					require('@/static/image/armyHonor/armyBanner.png'),
				],
				// 选项卡
				activeTab: 0,
				category: [],
				page: 1,
				currCategory: {},
				//列表资源
				list: [],
			};
		},
		onLoad() {
			this.getTagsByType();
		},
		methods: {
			changetab(i) {
				this.activeTab = i
				this.currCategory = this.category[i];
				this.inquiryArticle()
			},
			_click(item) {
				uni.navigateTo({
					url: '/pages/threeAffairs/details?dataUuid=' + item.articleUuid
				})
			},
			getTagsByType() {
				let params = {
					"areaCode": this.areaCode,
					"tagType": "MILITARY"
				}
				this.$api.request.getTagsByType(params, (res) => {
					if (res.body.status.statusCode == 0) {
						this.category = res.body.data.list
						this.currCategory = this.category[0];
						this.inquiryArticle()
					}
				})
			},
			inquiryArticle() {
				this.$api.request.inquiryArticlePagination({
					areaCode: this.areaCode,
					articleType: "MILITARY",
					tagName: this.currCategory.tagName,
					startIndex: this.page,
					pageSize: 5,
					published: true
				}, (res) => {
					if (res.body.status.statusCode === '0') {
						this.list = res.body.data.articles;
					}
				}, true)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.container {
		padding: 32rpx 32rpx;
	}

	.swiper-box {
		border-radius: 8rpx;
		margin-bottom: 32rpx;
	}
</style>
